"use client";

import { Box } from "@chakra-ui/react";
import Image from "next/image";
import { useTranslation } from "@/src/i18n";
import { getImgPath } from "@/src/utils";

const imgPath = getImgPath();

function ConnectMode({ mode }: { mode: string }) {
  const { t } = useTranslation("");
  return (
    <Box className="flex items-center gap-2">
      <Image
        src={
          mode === "有线连接"
            ? `${imgPath}/svgs/mode_usb.svg`
            : `${imgPath}/svgs/mode_dongle.svg`
        }
        alt="USB connection mode"
        width={24}
        height={24}
        className="mr-[-2px]"
      />
      <span className="text-white text-sm font-medium #151515">
        {mode === "有线连接" ? t("wiredConnect") : t("2.4GConnect")}
      </span>
    </Box>
  );
}

export default ConnectMode;
